<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<style type="text/css">
 
</style>
</head>

<body> 
        <div class="container">
            <h3>圆环和饼图</h3>
            <div id="vipTrend" style="height:250px;" class="b" >
            </div>
        </div>
<script src="http://cdn.bootcss.com/echarts/2.2.7/echarts.js"></script>
<script type="text/javascript">
//data:['当前企业人数','当前部门数','员工在线情况','员工激活情况']
//折线图
require.config({
    paths: {
        echarts: 'http://cdn.bootcss.com/echarts/2.2.7/'
    }
}); 
loadChart();
function loadChart(){
    require([
           'echarts',
           'echarts/chart/pie'
       ],requireCallback);
}
var echarts;
var labelTop = {
    normal : {
        label : {
            show : true,
            position : 'center',
            formatter : '{b}',
            textStyle: {
                baseline : 'bottom'
            }
        },
        labelLine : {
            show : false
        }
    }
};
var labelFromatter = {
    normal : {
        label : {
            formatter : function (params){
                return  params.value + '人'
            },
            textStyle: {
                baseline : 'top'
            }
        }
    },
}
var labelBottom = {
    normal : {
        color: '#ccc',
        label : {
            show : true,
            position : 'center'
        },
        labelLine : {
            show : false
        }
    },
    emphasis: {
        color: 'rgba(0,0,0,0)'
    }
};
var radius = [50, 55];
option = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'top',
        data:['当前企业人数','当前部门数','员工在线情况','员工激活情况']
    }, 
    series : [
        {
            type : 'pie',
            center : ['10%', '40%'],
            radius : radius,
            x: '0%', // for funnel
            itemStyle : {
                normal : {
                    label : {
                        position : 'center',
                        formatter : function (params){
                            return params.value + '人'
                        }
                    },
                    labelLine : {show : false}
                }
            },
            data : [
                {name:'当前企业人数', value:135}
            ]
        },
        {
            type : 'pie',
            center : ['32%', '40%'],
            radius : radius,
            x:'20%', // for funnel
            itemStyle : {
                normal : {
                    label : {
                        position : 'center',
                        formatter : function (params){
                            return params.value + '人'
                        }
                    },
                    labelLine : {show : false}
                }
            },
            data : [
                {name:'当前部门数', value:541 }
            ]
        },
        {
            type : 'pie',
            center : ['55%', '40%'],
            radius : [0, 55],
            x:'40%', // for funnel    
            itemStyle : {
                normal : {
                    label : {
                        position : 'inner'
                    },
                    labelLine : {show : false}
                }
            },
            data : [
                {name:'不在线', value:265, itemStyle : {
                    normal : {
                        color: '#ccc',
                        label : {
                            show : true,
                            formatter : '{c} 人'
                        }
                    }
                }},
                {name:'在线', value:35,itemStyle : {
                    normal : {
                        label : {
                            show : true,
                            formatter : '{c} 人'
                        }
                    }
                }}
            ]
        },
        {
            type : 'pie',
            center : ['80%', '40%'],
            radius : [0, 55],
            x:'60%', // for funnel                         
            itemStyle : {
                normal : {
                    label : {
                        position : 'inner'
                    },
                    labelLine : {
                        show : false
                    }
                }
            },
            data : [
                {name:'未激活人数', value:370, itemStyle : {
                    normal : {
                        color: '#ccc',
                        label : {
                            show : true,
                            formatter : '{c} 人'
                        }
                    }
                }},
                {name:'已激活人数', value:30,itemStyle : {
                    normal : {
                        label : {
                            show : true,
                            formatter : '{c} 人'
                        }
                    }
                }}
            ]
        }
    ]
};
 
function requireCallback (ec) {
    echarts = ec;
    var myChart=echarts.init(document.getElementById('vipTrend'))
    myChart.setOption(option); 
   }

</script>
</body>
</html>
